<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom :title="reqData.jobType == 1 ? '校招': '社招'" :isAppBtn="false"></HeadCustom>
		<view class="fboxRow search-box">
			<view class="input flex1 fboxRow Ycenter font24" @click="$pageTo('/recruit/user/searchList')"> <u-icon name="search"></u-icon> <text class="ml24">搜索职位、公司</text></view>
		</view>
		<view class="card-box">
			<view class="card-hd">
				<NavFilter :reqData="reqData" :isFilter="true" @change="tabChange" type="user" />
			</view>
			<view class="card-bd fboxCol Ycenter Xcenter">
				<view v-if="listConfig.loading == 'list-not'">
					<u-loadmore fontSize="24rpx" :status="listConfig.loading" />
				</view>
				<view class="card-scroll" v-if="listData.length || listConfig.loading =='loading'">
					<scroll-view  :scroll-top="scrollTop" scroll-y="true" 
					@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" :style="{height: scrollHeight +'px'}">
						<view class="list">
							<view v-for="(item, index) in listData" :key="index">
								<RecruitmentItem type="recruitmentIndex" :innerData="item" />
							</view>
							<u-loadmore fontSize="24rpx" :status="listConfig.loading" />
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {resumeInfo, jobFilter, deliverJob} from '@/api/recruit.js';
	import RecruitmentItem from '@/components/card/recruitment-item.vue';
	import NavFilter from '../components/nav-filter.vue';	
	import {listMixins} from '../common/list.mixins.js';
	export default {
		mixins: [listMixins],
		components:{
			NavFilter,RecruitmentItem
		},
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				scrollTop: 0,
				scrollHeight: 0,
				listConfig: {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loading'
				},
				listData: [],
				reqData: {
					"cityId": "",
					"educationList": [],
					"experienceList": [],
					"salaryMax": '',
					"salaryMin": '',
					jobType: 1,
					positionType: ''
				},
				isDeliver: false,
				deliverItem: {},
				isVitaModal: false
			}
		},
		onLoad(option) {
			if(option && option.jobType){
				this.reqData.jobType = option.jobType
			}
		},
		onShow() {
			const filterTemp = getApp().globalData.filterTemp
			if(filterTemp.hasOwnProperty('expectCityId')){
				// this.reqData = filterTemp
				this.reqData.educationList = filterTemp.educationList
				this.reqData.experienceList = filterTemp.experienceList
				this.reqData.salaryMin= filterTemp.salary && filterTemp.salary.split('-')[0]
				this.reqData.salaryMax= filterTemp.salary && filterTemp.salary.split('-')[1]
				this.reqData.cityId= filterTemp.expectCityId
				// this.getInit()
			}
		},
		onReady() {
			console.log('onReady');
			this.getHeight('.head-custom-wrap,.card-hd, .search-box')
		},
		methods: {
			tabChange(e){
				this.reqData.positionType = e.name == '全部' ? '' : e.name
				this.scrollTop = 0
				this.getInit()
			},
			getInit(){
				this.listConfig = {
					current: 1,
					size: 10,
					count: 0,
					loading: 'loading'
				}
				this.listData = []
				this.getList()
			},
			getList(){
				const { current, size, loading} = this.listConfig
				jobFilter({current, size,...this.reqData }).then(res=>{
					if(this.listData.length){
						this.listData = this.listData.concat(res.data.list) 
					}else{
						this.listData = res.data.list
					}
					this.listLoading(res)
				})
			},
			upper: function(e) {
				console.log('upper',e)
			},
			lower: function(e) {
				console.log('lower',e)
				this.listMore()
			},
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap{min-height: calc(100vh);}
	.card-box /deep/.u-tabs__wrapper__nav__item{position: relative;}
	.card-box /deep/.u-tabs__wrapper__nav__item__text--disabled{color: #e8cda7!important;}
	.card-box /deep/.u-tabs__wrapper__nav__item__text--disabled::after{content: '';position: absolute;bottom: 4rpx;left: 50%; margin-left: -30rpx;width: 60rpx;height: 6rpx;background-color: #e8cda7;border-radius: 6rpx;}
	// .card-scroll{width: 702rpx;}
	.card-scroll{width: 100%;padding: 40rpx 20rpx;}
	// .card-box .list{padding: 24rpx 0;}
	.more-action{}
	.more-action .icon{width: 40rpx;height: 40rpx}
	.more-action .more{margin-left: 32rpx;width: 116rpx;height: 48rpx;background: #21242C;border-radius: 4rpx;}

	.search-box{
		padding: 0 24rpx 14rpx;
		height: 78rpx;
	}
	.search-box .input{padding: 0 24rpx;height: 64rpx;border-radius: 32rpx;background-color: var(--searchViewBackColor);color: var(--contentFontFourColor);}
	.color-747986{color:#747986}
	.bg-232732{background-color: #232732;}
	
</style>
